<template>
    <div class="box">
        <div class="a">
            <ul>
                <p>税务信息</p>
                <li type="disc">
                    <p>纳税总计</p>
                    <div class="a-a">
                        <div id="main" style="
                  height: 330px;
                  width: 500px;
                  margin-top: 10px;
                  background-color: #eee;
                "></div>
                        <div style="margin-top: 20px">
                            <el-table :data="tableData" border size="small">
                                <el-table-column prop="year" label="年月" width="60">
                                </el-table-column>
                                <el-table-column prop="01" label="1月" width="60">
                                </el-table-column>
                                <el-table-column prop="02" label="2月" width="60">
                                </el-table-column>
                                <el-table-column prop="03" label="3月" width="60">
                                </el-table-column>
                                <el-table-column prop="04" label="4月" width="60">
                                </el-table-column>
                                <el-table-column prop="05" label="5月" width="60">
                                </el-table-column>
                                <el-table-column prop="06" label="6月" width="60">
                                </el-table-column>
                                <el-table-column prop="07" label="7月" width="60">
                                </el-table-column>
                                <el-table-column prop="08" label="8月" width="60">
                                </el-table-column>
                                <el-table-column prop="08" label="9月" width="60">
                                </el-table-column>
                                <el-table-column prop="10" label="10月" width="60">
                                </el-table-column>
                                <el-table-column prop="11" label="11月" width="60">
                                </el-table-column>
                                <el-table-column prop="12" label="12月" width="60">
                                </el-table-column>
                                <el-table-column prop="value" label="总计" width="60">
                                </el-table-column>
                            </el-table>
                        </div>
                    </div>
                </li>
                <li>
                    <p>纳税明细</p>
                    <div class="a-b">
                        <div style="
                  height: 300px;
                  width: 690px;
                  margin-top: 10px;
                  background-color: #eee;
                "></div>
                        <div style="height: 200px; background-color: #fefafe; margin-top: 20px">
                            <p>企业所得税税额</p>
                            <el-table :data="tableData" border size="small">
                                <el-table-column prop="year" label="年月" width="80">
                                </el-table-column>
                                <el-table-column prop="value" label="总计" width="80">
                                </el-table-column>
                            </el-table>
                        </div>
                        <div style="height: 200px; background-color: #fefafe; margin-top: 20px">
                            <p>增值税税额</p>
                            <el-table :data="tableData" border size="small">
                                <el-table-column prop="year" label="年月" width="80">
                                </el-table-column>
                                <el-table-column prop="value" label="总计" width="80">
                                </el-table-column>
                            </el-table>
                        </div>
                    </div>
                </li>
            </ul>
            <div>
                <p>纳税明细</p>
                <div></div>
                <div>
                    <el-table :data="tableData" border size="small">
                        <el-table-column prop="year" label="年月" width="80">
                        </el-table-column>
                        <el-table-column prop="value" label="总计" width="80">
                        </el-table-column>
                    </el-table>
                </div>
                <div>
                    <el-table :data="tableData" border size="small">
                        <el-table-column prop="year" label="年月" width="80">
                        </el-table-column>
                        <el-table-column prop="value" label="总计" width="80">
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </div>
        <div class="b">
            <p>发票信息</p>
            <div>
                <p>月度开票情况</p>
                <el-table :data="tableData" border size="small">
                    <el-table-column prop="year" label="年月" width="80">
                    </el-table-column>
                    <el-table-column prop="value" label="总计" width="80">
                    </el-table-column>
                </el-table>
            </div>
            <div>
                <el-table :data="tableData" border size="small">
                    <el-table-column prop="year" label="年月" width="80">
                    </el-table-column>
                    <el-table-column prop="01" label="1" width="80"> </el-table-column>
                    <el-table-column prop="02" label="2" width="80">
                    </el-table-column>
                    <el-table-column prop="03" label="3" width="80"> </el-table-column>
                    <el-table-column prop="04" label="4" width="80"> </el-table-column>
                    <el-table-column prop="05" label="5" width="80"> </el-table-column>
                    <el-table-column prop="06" label="6" width="80"> </el-table-column>
                    <el-table-column prop="07" label="7" width="80"> </el-table-column>
                    <el-table-column prop="08" label="8" width="80"> </el-table-column>
                    <el-table-column prop="09" label="9" width="80"> </el-table-column>
                    <el-table-column prop="10" label="10" width="80"> </el-table-column>
                    <el-table-column prop="11" label="11" width="80"> </el-table-column>
                    <el-table-column prop="12" label="12" width="80"> </el-table-column>
                    <el-table-column prop="value" label="总计" width="80">
                    </el-table-column>
                </el-table>
            </div>
            <div>
                <p>开票交易对手统计</p>
                <div>
                    <el-table :data="tableData" border size="small">
                        <el-table-column prop="year" label="年月" width="80">
                        </el-table-column>
                        <el-table-column prop="01" label="1" width="80">
                        </el-table-column>
                        <el-table-column prop="02" label="2" width="80">
                        </el-table-column>
                        <el-table-column prop="03" label="3" width="80">
                        </el-table-column>
                        <el-table-column prop="04" label="4" width="80">
                        </el-table-column>
                        <el-table-column prop="05" label="5" width="80">
                        </el-table-column>
                        <el-table-column prop="06" label="6" width="80">
                        </el-table-column>
                        <el-table-column prop="07" label="7" width="80">
                        </el-table-column>
                        <el-table-column prop="08" label="8" width="80">
                        </el-table-column>
                        <el-table-column prop="09" label="9" width="80">
                        </el-table-column>
                        <el-table-column prop="10" label="10" width="80">
                        </el-table-column>
                        <el-table-column prop="11" label="11" width="80">
                        </el-table-column>
                        <el-table-column prop="12" label="12" width="80">
                        </el-table-column>
                        <el-table-column prop="value" label="总计" width="80">
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
//   import { invoiceDataService } from "../../api/tax";

export default {
    data() {
        return {
            params: [],
            tableData: [
                {
                    year: "2024",
                    "01": 100,
                    "02": 200,
                    "03": 150,
                    "04": 300,
                    "05": 250,
                    "06": 400,
                    "07": 350,
                    "08": 500,
                    "09": 450,
                    "10": 600,
                    "11": 550,
                    "12": 700,
                    value: 4500, // 总计
                },
                {
                    year: "2023",
                    "01": 90,
                    "02": 180,
                    "03": 135,
                    "04": 270,
                    "05": 225,
                    "06": 360,
                    "07": 315,
                    "08": 450,
                    "09": 405,
                    "10": 540,
                    "11": 495,
                    "12": 630,
                    value: 4050, // 总计
                },
                {
                    year: "2022",
                    "01": 80,
                    "02": 160,
                    "03": 120,
                    "04": 240,
                    "05": 200,
                    "06": 320,
                    "07": 280,
                    "08": 400,
                    "09": 360,
                    "10": 480,
                    "11": 440,
                    "12": 560,
                    value: 3600, // 总计
                },
            ],
        };
    },
    methods: {
        getInvoiceDataService() {
            invoiceDataService(this.params).then((res) => {
                console.log(res);
                if (res.code === 0) {
                    this.tableData = res.result.data;
                }
            });
        },
    },
    mounted() {
        this.getInvoiceDataService();
    },
};
</script>
<style scope>
.box {
    height: 100%;
    display: grid;
    align-items: center;
    justify-content: center;
}

.a {
    height: 100%;
    display: grid;
    align-items: center;
    justify-content: center;

    .a-a {
        display: grid;
        justify-items: center;
    }

    .a-b {
        display: grid;
        justify-items: center;
    }
}
</style>